<header id="page-builder-header" class="fixed-top">
  <nav class="navbar navbar-expand-lg">
    <div data-controller="tooltip">
      <% back_url = @page.custom? ? spree.admin_pages_path : spree.admin_themes_path %>
      <%= link_to back_url, class: 'btn hover-gray shadow-none px-2' do %>
        <%= icon('x', class: 'mr-0') %>
      <% end %>
      <%= tooltip(Spree.t('admin.back_to_dashboard')) %>
    </div>
    <% if @page.custom? %>
      <div class="px-3">
        <span class="text-muted mr-1"><%= I18n.t('activerecord.models.spree/page.one') %>:</span>
        <strong><%= @page.display_name %></strong>
      </div>

      <%= link_to_with_icon 'settings', Spree.t(:settings), spree.edit_admin_page_path(@page.id), class: 'btn btn-light', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
    <% else %>
      <div class="px-3">
        <span class="text-muted mr-1"><%= Spree.t(:theme) %>:</span>
        <strong class="mr-1"><%= @theme.name %></strong>
        &nbsp;
        <% if @theme.default? %>
          <span class="badge badge-success">
            <%= icon('check') %>
            <%= Spree.t(:live) %>
          </span>
        <% else %>
          <span class="badge badge-warning">
            <%= Spree.t(:draft) %>
          </span>
        <% end %>
      </div>
      <%= render 'spree/admin/page_builder/pages_dropdown' %>

      <ul class="nav nav-pills" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active"
                        data-controller="tooltip"
                        data-tabs-target="tab"
                        data-action="click->tabs#select"
                        type="button"
                        role="tab"
                        aria-controls="sections"
                        aria-selected="true"
                        data-trigger="hover"
                        id="sidebar-icon-page">
            <%= icon 'section', class: 'mr-0' %>
            <%= tooltip("Page sections") %>
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link"
                  data-controller="tooltip"
                  data-tabs-target="tab"
                  data-action="click->tabs#select"
                  type="button"
                  role="tab"
                  aria-controls="theme"
                  aria-selected="false"
                  data-trigger="hover"
                  id="sidebar-icon-colors">
            <%= icon 'palette', class: 'mr-0' %>
            <%= tooltip(Spree.t(:theme)) %>
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link"
                data-controller="tooltip"
                type="button"
                data-tabs-target="tab"
                data-action="click->tabs#select"
                type="button"
                role="tab"
                aria-controls="fonts"
                aria-selected="false"
                data-trigger="hover"
                id="sidebar-icon-fonts">
            <%= icon 'typography', class: 'mr-0' %>
            <%= tooltip("Fonts") %>
          </button>
        </li>
      </ul>
    <% end %>

    <ul class="nav nav-pills ml-auto" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link" type="button"
                data-controller="tooltip"
                data-trigger="hover"
                data-action="click->page-builder#setResponsiveBreakpoint"
                data-page-builder-target="mobileButton"
                data-page-builder-breakpoint-param="mobile">
          <%= icon 'device-mobile', class: 'mr-0' %>
          <%= tooltip("Mobile") %>
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link active" type="button"
                data-controller="tooltip"
                data-action="click->page-builder#setResponsiveBreakpoint"
                data-page-builder-breakpoint-param="desktop"
                data-trigger="hover"
                data-page-builder-target="desktopButton">
          <%= icon 'device-laptop', class: 'mr-0' %>
          <%= tooltip("Desktop") %>
        </button>
      </li>
    </ul>

    <%= link_to_with_icon 'eye', Spree.t(:preview), @page.preview_url(@theme_preview, @page_preview), class: 'btn btn-light ml-auto', target: '_blank' %>
    <%= turbo_save_button_tag(@theme.default? ? icon('cloud-up') + Spree.t('actions.publish') : icon('pencil-check') + Spree.t('actions.save')) %>
  </nav>
</header>
